<template>
  <div class="onerow">
    <div class="col-4">
      <h3>组件配置页面展示</h3>
      <div class="draggable" style="padding: 20px"  >
      <div class="Grid" style="padding: 20px;border: 2px dashed #100;" @contextmenu="showGridMenu">
       <div class="Row" :rowId="row.rowId" @contextmenu="showRowMenu" v-for="(row,rowId) in rowList" :key="rowId" >
        <div class="Grid-cell" v-for="(item,d) in row" :key="d">
		  <PublicLabel :item="item"  />
		  <PublicItem :item="item" :design="isdesign" @change="getChange" /> 	  
        </div>
		<vue-context-menu :contextMenuData="rowMenuData"
        @beforeaddrow="beforeaddrow(row.rowId)"
        @afteraddrow="afteraddrow(row.rowId)"
		@deleterow="deleterow(row.rowId)"
		></vue-context-menu>
      </div> 
<vue-context-menu :contextMenuData="gridMenuData"
        @addrow="addrow"></vue-context-menu>	  
    </div>
	</div>
    </div>
    <div class="col-5">
      <h3>可用组件列表</h3>
        <div
        class="list-group"    >
	    <div class="list-group-item" v-for="element in list1" :key="element.id">
        <div class="Grid-cell" >
		<PublicItem :item="element" :design="isdesign" />
		</div>
		</div>
     
	  </div>
    </div>
  </div>
</template>
<script>
 import Sortable from 'sortablejs';
 import PublicItem from "../PublicItem/index";
 import PublicLabel from "../PublicLabel/index";
 //import draggable from "vuedraggable";
export default {
  name: "clone",
  display: "Clone",
  order: 2,
  mounted() {
   //
   this.divDrop();
   //可用组件列表
   this.usableAssemblyDrop();
 },
   components: {
    PublicItem,
	PublicLabel
  },
  data() {
    return {
	  isdesign:1,
	  value:'',
	   rowList:[],
      rowList1: [[{type:"input",model:"name",label:"姓名",options:{width:"80px;",placeholder:"请输入内容"}},
	  {type:"input",model:"test",label:"测试",options:{width:"80px;",placeholder:"请输入测试内容"}}
	  ],[{type:"input-number" ,model:"age",label:"年龄",options:{width:"80px;",placeholder:"输入描述文字","min":1,"max":10}}],
	  [{type:"select",model:"hobby",label:"爱好",options:{width:"80px;",placeholder:"请选择",
	  items: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ]
	  }},{type:"switch",model:"sex",label:"性别",options:{width:"80px;",activeColor:"#13ce66", inactiveColor:"#ff4949"}}]
	  ],
	  sortable:'',
      list1: [
      {type:"input",label:"输入框",options:{width:"80px;",placeholder:"请输入内容"}}
	  ,{type:"input-number" ,label:"计数器",options:{width:"80px;",placeholder:"输入描述文字","min":1,"max":10}},
	  {type:"select",model:"hobby",label:"选择器",options:{width:"80px;",placeholder:"请选择",
	  items: [
        {
          value: "1",
          label: "选项1"
        },
        {
          value: "2",
          label: "选项2"
        },
        {
          value: "3",
          label: "选项3"
        },
        {
          value: "4",
          label: "选项4"
        }
      ]
	  }},{type:"switch",label:"开关",options:{width:"80px;",activeColor:"#13ce66", inactiveColor:"#ff4949"}}
      ],
      list2: [],
      activeNames: [],
      count: 0,
	  uuidA:"",
	  form:{},
	   // 菜单数据
       rowMenuData: {
         menuName: 'rowManager',
         //菜单显示的位置
         axis: {
           x: null,
           y: null
         },
         //菜单选项
         menulists: [{
           fnHandler: 'beforeaddrow', //绑定事件
           icoName: 'fa fa-home fa-fw', //icon图标
           btnName: '前面插入行' //菜单名称
         }, {
             fnHandler: 'afteraddrow',
             icoName: 'fa fa-minus-square-o  fa-fw',
             btnName: '后面插入行'
         },{
             fnHandler: 'deleterow',
             icoName: 'fa fa-minus-square-o  fa-fw',
             btnName: '删除行'
         }
		 ]
       },
	   gridMenuData: {
         menuName: 'gridManager',
         //菜单显示的位置
         axis: {
           x: null,
           y: null
         },
         //菜单选项
         menulists: [{
           fnHandler: 'addrow', //绑定事件
           icoName: 'fa fa-home fa-fw', //icon图标
           btnName: '增加行' //菜单名称
         }
		 ]
       },
	   //排序列表
	   sortables:[],
    };
  },
  methods: {
    // div拖拽
    divDrop() {
      const wrapperTr = document.querySelectorAll(".Grid .Row");
      var i;
      for (i = 0; i < wrapperTr.length; i++) {
	  
        var sortable = Sortable.create(wrapperTr[i], {
          draggable: ".Grid-cell",
          delay: 0,
          group: { name: "" + i, pull: true, put: true },
		   onClone: function (evt) {
         //debugger;
        //被克隆的对象
        var origEl = evt.item;
		console.log('原始对象：'+JSON.stringify(origEl));
        //克隆后的对象
        var cloneEl = evt.clone;
        console.log('新的' + JSON.stringify(cloneEl));
       },
		  onAdd:evt=>{
		    console.log('onAdd:'+evt);
			console.log('rowList len:'+this.rowList.length);
		  },
          onEnd: evt => {
            //if(evt.from.firstChild.outerHTML){
            //console.log('from:'+evt.from.firstChild.outerHTML);
            //}
            //if(evt.to.firstChild.outerHTML){
            //console.log('to:'+evt.to.firstChild.outerHTML);
            //}
            console.log('divDrop:'+evt);
            console.log(evt.srcElement);
            //获取拖动后的排序
            //var arr = sortable.toArray();
            //console.log(JSON.stringify(arr));
          }
        });
		var rowSortable=[];
		rowSortable.rowId = wrapperTr[i].rowId;
		rowSortable.rowSortable = sortable; 
		this.sortables.push(rowSortable);
      }
    },
	//增加 div Row拖拽
    divRowDrop(rowId) {
	  debugger;
      const wrapperRow = document.querySelectorAll(".Grid .Row");
      var i;
	  var domRowId;
      for (i = 0; i < wrapperRow.length; i++) {
       domRowId = wrapperRow[i].getAttribute("rowId");	   
	   if(rowId == domRowId){
        var sortable = Sortable.create(wrapperRow[i], {
          draggable: ".Grid-cell",
          delay: 0,
          group: { name: "" + i, pull: true, put: true },
		   onClone: function (evt) {
         //debugger;
        //被克隆的对象
        var origEl = evt.item;
		console.log('原始对象：'+JSON.stringify(origEl));
        //克隆后的对象
        var cloneEl = evt.clone;
        console.log('新的' + JSON.stringify(cloneEl));
       },
		  onAdd:evt=>{
		    console.log('onAdd:'+evt);
			console.log('rowList len:'+this.rowList.length);
		  },
          onEnd: evt => {
            //if(evt.from.firstChild.outerHTML){
            //console.log('from:'+evt.from.firstChild.outerHTML);
            //}
            //if(evt.to.firstChild.outerHTML){
            //console.log('to:'+evt.to.firstChild.outerHTML);
            //}
            console.log('divDrop:'+evt);
            console.log(evt.srcElement);
            //获取拖动后的排序
            //var arr = sortable.toArray();
            //console.log(JSON.stringify(arr));
          }
        });
		var rowSortable=[];
		rowSortable.rowId = wrapperRow[i].rowId;
	    rowSortable.rowSortable = sortable; 
		this.sortables.push(rowSortable);
		break;
		}
      }
    },
	//删除 div Row对应的拖拽对象
    removeDivRowDrop(rowId) {
	  debugger;
      var i;

      for (i = 0; i < this.sortables.length; i++) {
       var rowSortable=this.sortables[i]; 
	   if(rowId == rowSortable.rowId){
         this.sortables.splice(i,1);
		 break;
	   }
      }
    },

	//可用组件列表
	usableAssemblyDrop(){
	   const wrapperTr = document.querySelectorAll(".list-group .list-group-item");
	   var i=0;
	   for(i=0;i<wrapperTr.length;i++){
        Sortable.create(wrapperTr[i], {
          draggable: ".Grid-cell",
          delay: 0,
          group: { name: "1" , pull: 'clone', put: true },
          onEnd: evt => {
            //if(evt.from.firstChild.outerHTML){
            //console.log('from:'+evt.from.firstChild.outerHTML);
            //}
            //if(evt.to.firstChild.outerHTML){
            //console.log('to:'+evt.to.firstChild.outerHTML);
            //}
            console.log('usableAssemblyDrop:'+evt);
            console.log(evt.srcElement);
            //获取拖动后的排序
            //var arr = sortable.toArray();
            //console.log(JSON.stringify(arr));
          }
        });
      }
	},
	//获取内容变更
	getChange(value, key){
		console.log("value:"+value+",key:"+key);
		this.form[key]=value;
		console.log("form:"+JSON.stringify(this.form));
	},
	showGridMenu () {
        event.preventDefault()
        var x = event.clientX
        var y = event.clientY
        if(this.rowList.length==0){
		// Get the current location
         this.gridMenuData.axis = {
          x, y
        }
	  }
    },
	showRowMenu () {
        event.preventDefault()
        var x = event.clientX
        var y = event.clientY
        // Get the current location
      this.rowMenuData.axis = {
        x, y
      }
    },
    beforeaddrow (rowId) {
	  var i;
	  debugger;
      for (i = 0; i < this.rowList.length; i++) {
	     if(rowId== this.rowList[i].rowId){
		   var row =[];  
		   row["rowId"]=this.uuid();
		   this.rowList.splice(i,0,row);
		   setTimeout(() => {
            this.divRowDrop(row["rowId"])
        }, 2000);
		   break;
		 }
	  }
      console.log('beforeaddrow rowId:'+rowId);
    },
    deleterow (rowId) {
      console.log('deleterow rowId:'+rowId);
	  var i;
      for (i = 0; i < this.rowList.length; i++) {
	     if(rowId== this.rowList[i].rowId){
		   this.rowList.splice(i,1);
		   setTimeout(() => {
            this.removeDivRowDrop(rowId)
        }, 2000);
		   break;
		 }
	  }
    },
	afteraddrow (rowId) {
      var i;
      for (i = 0; i < this.rowList.length; i++) {
	     if(rowId== this.rowList[i].rowId){
		   var row =[];  
		   row["rowId"]=this.uuid();
		   this.rowList.splice(i+1,0,row);
		   setTimeout(() => {
            this.divRowDrop(row["rowId"])
        }, 2000);
		   break;
		 }
	  }
	  console.log('afteraddrow rowId:'+rowId);
    },
	addrow () {
      var row=[];
	  row["rowId"]=this.uuid();
	  this.rowList.push(row);
	  setTimeout(() => {
            this.divRowDrop(row["rowId"])
        }, 2000);
	  
    },
	//uuid
	uuid() {
                var s = [];
                var hexDigits = '0123456789abcdef';
                for (var i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = '4';
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
                s[8] = s[13] = s[18] = s[23] = '-';

                this.uuidA = s.join('');
                //console.log(s.join(''), 's.join("")');
                return this.uuidA;
    },
  }
};
</script>
<style>
.onerow {
  display: flex;
  margin-left:0px;
  width: 100%;
}
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border: 0;
}

.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  box-sizing: border-box;
}

.el-collapse-item__header {
  border: 0;
  height: 40px;
  line-height: 40px;
}

.el-collapse-item__wrap {
  border-bottom: 0;
}
.el-icon-circle-close {
    color: #c9a2a2;
    font-size: 20px;
    position:relative;
	margin-top:-20px;
    right: 50px;
}
.col-4 {
  flex: 0 0 70%;
  max-width: 70%;
  margin-right: 10px;
  margin-left:5px;
}
.col-5 {
  flex: 0 0 30%;
  max-width: 30%;
  margin-right: 2px;
}
.Grid {
  width: 100%;
}
.Row {
  display: flex;
  border: 1px dashed #000;
  height: 50px;
}
.Grid-cell {
  display: flex;
  disabled:disabled;
  /* flex: 1; */
}
.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
</style>